<template>
	<view class="pics">
		<scroll-view class="left" scroll-y>
			<!-- <view @click="leftClick(index,item.id)":class="active===index?'active':''" v-for="(item,index) in picList" :key="item.id">{{item.title}}</view> -->
			<view @click="leftClick(index,1)" :class="active===index?'active':''" v-for="(item,index) in picList" :key="index">{{item.title}}</view>
		</scroll-view>
		<scroll-view class="right" scroll-y>
			<view class="item" v-for="(item,index) in picItem" :key="index">
				<image @click="priImg(item.imgPath)" :src="item.imgPath"></image>
				<text>{{item.title}}</text>
			</view>
			<text v-if="picItem.length===0">暂无数据</text>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				picList: [{
					title: '家居生活'
				}, {
					title: '美女图片'
				}, {
					title: '麻瓜图片'
				}],
				picItem: [{
					title: '尼玛的大图',
					imgPath: '../../static/contact/guanyu.jpg'
				}],
				active: 0

			}
		},
		onLoad() {
			//this.getPicCate
		},
		methods: {
			async getPicCate() {
				const res = await this.$myRequest({
					url: ''
				})
				this.picList = res.data.message
				this.leftClick(0, this.picList[0].id)
			},
			async leftClick(index, id) {
				this.active = index
				//获取右侧的数据
				/* const res = await this.$myRequest({
					url: ''+id
				})
				this.picItem = res.data.message */
				this.picItem=[{
					title: '尼玛的大图',
					imgPath: '../../static/contact/guanyu.jpg'
				}]
				if (index === 2) return this.picItem = []
			},
			priImg(current){
				const urls=this.picItem.map(item=>{
					return item.imgPath;
				})
				uni.previewImage({
					current,
					urls
				})
			}
			

		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.pics {
		height: 100%;
		display: flex; //同排显示flex布局

		.left {
			width: 200rpx;
			height: 100%;
			border-right: 1px solid #eee; //加边框

			view {
				height: 60px;
				line-height: 60px;
				color: #333333;
				text-align: center;
				font-size: 30rpx;
				border-top: 1px solid #eee;
			}

			.active {
				background-color: $shop-color;
				color: #fff;
			}
		}

		.right {
			height: 100%;
			width: 530rpx;
			margin: 10rpx auto;

			.item {
				image {
					width: 520rpx;
					height: 520rpx;
					border-radius: 5px; //圆角
				}

				text {
					font-size: 30rpx;
					line-height: 60rpx;
				}
			}
		}
	}
</style>
